import React from 'react';
import styles from './features.module.css';

const Feature = ({ text, icon }) => (
  <div className={styles.feature}>
    {icon}
    <h4>{text}</h4>
  </div>
);

export default () => (
  <div>
    <p className="text-lg mb-2 text-gray-600 md:text-xl">
      Zero-config CLI for TypeScript package development
    </p>
    <div className={styles.features}>
      <Feature
        text={<>CJS, ESM, UMD</>}
        icon={
          <svg
            width="24"
            height="24"
            fill="none"
            stroke="currentColor"
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth="1.5"
            shapeRendering="geometricPrecision"
            viewBox="0 0 24 24"
          >
            <path d="M16.5 9.4l-9-5.19M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z"></path>
            <path d="M3.27 6.96L12 12.01l8.73-5.05M12 22.08V12"></path>
          </svg>
        }
      />
      <Feature
        text={<>Treeshaking</>}
        icon={
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
            className="feather feather-crosshair"
          >
            <circle cx="12" cy="12" r="10"></circle>
            <line x1="22" y1="12" x2="18" y2="12"></line>
            <line x1="6" y1="12" x2="2" y2="12"></line>
            <line x1="12" y1="6" x2="12" y2="2"></line>
            <line x1="12" y1="22" x2="12" y2="18"></line>
          </svg>
        }
      />
      <Feature
        text={
          <>
            Live <span className="hidden sm:inline">Playground</span>
          </>
        }
        icon={
          <svg
            width="24"
            height="24"
            fill="none"
            stroke="currentColor"
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth="1.5"
            shapeRendering="geometricPrecision"
            viewBox="0 0 24 24"
          >
            <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"></path>
          </svg>
        }
      />
      <Feature
        text="Dev/Prod Builds"
        icon={
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width={24}
            height={24}
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth={2}
            strokeLinecap="round"
            strokeLinejoin="round"
            className="feather feather-code"
          >
            <polyline points="16 18 22 12 16 6" />
            <polyline points="8 6 2 12 8 18" />
          </svg>
        }
      />
      <Feature
        text="Zero-config"
        icon={
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width={24}
            height={24}
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth={2}
            strokeLinecap="round"
            strokeLinejoin="round"
            className="feather feather-terminal"
          >
            <polyline points="4 17 10 11 4 5" />
            <line x1={12} y1={19} x2={20} y2={19} />
          </svg>
        }
      />
      <Feature
        text="Project Templates"
        icon={
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width={24}
            height={24}
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth={2}
            strokeLinecap="round"
            strokeLinejoin="round"
            className="feather feather-file-plus"
          >
            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
            <polyline points="14 2 14 8 20 8" />
            <line x1={12} y1={18} x2={12} y2={12} />
            <line x1={9} y1={15} x2={15} y2={15} />
          </svg>
        }
      />
      <Feature
        text="TypeScript"
        icon={
          <svg
            fill="none"
            height="26"
            viewBox="0 0 27 26"
            width="27"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              clipRule="evenodd"
              d="m.98608 0h24.32332c.5446 0 .9861.436522.9861.975v24.05c0 .5385-.4415.975-.9861.975h-24.32332c-.544597 0-.98608-.4365-.98608-.975v-24.05c0-.538478.441483-.975.98608-.975zm13.63142 13.8324v-2.1324h-9.35841v2.1324h3.34111v9.4946h2.6598v-9.4946zm1.0604 9.2439c.4289.2162.9362.3784 1.5218.4865.5857.1081 1.2029.1622 1.8518.1622.6324 0 1.2331-.0595 1.8023-.1784.5691-.1189 1.0681-.3149 1.497-.5879s.7685-.6297 1.0187-1.0703.3753-.9852.3753-1.6339c0-.4703-.0715-.8824-.2145-1.2365-.1429-.3541-.3491-.669-.6186-.9447-.2694-.2757-.5925-.523-.9692-.7419s-.8014-.4257-1.2743-.6203c-.3465-.1406-.6572-.2771-.9321-.4095-.275-.1324-.5087-.2676-.7011-.4054-.1925-.1379-.3409-.2838-.4454-.4379-.1045-.154-.1567-.3284-.1567-.523 0-.1784.0467-.3392.1402-.4824.0935-.1433.2254-.2663.3959-.369s.3794-.1824.6269-.2392c.2474-.0567.5224-.0851.8248-.0851.22 0 .4523.0162.697.0486.2447.0325.4908.0825.7382.15.2475.0676.4881.1527.7218.2555.2337.1027.4495.2216.6475.3567v-2.4244c-.4015-.1514-.84-.2636-1.3157-.3365-.4756-.073-1.0214-.1095-1.6373-.1095-.6268 0-1.2207.0662-1.7816.1987-.5609.1324-1.0544.3392-1.4806.6203s-.763.6392-1.0104 1.0743c-.2475.4352-.3712.9555-.3712 1.5609 0 .7731.2268 1.4326.6805 1.9785.4537.546 1.1424 1.0082 2.0662 1.3866.363.146.7011.2892 1.0146.4298.3134.1405.5842.2865.8124.4378.2282.1514.4083.3162.5403.4946s.198.3811.198.6082c0 .1676-.0413.323-.1238.4662-.0825.1433-.2076.2676-.3753.373s-.3766.1879-.6268.2473c-.2502.0595-.5431.0892-.8785.0892-.5719 0-1.1383-.0986-1.6992-.2959-.5608-.1973-1.0805-.4933-1.5589-.8879z"
              fill="#007ACC"
              fillRule="evenodd"
            ></path>
          </svg>
        }
      />
      <Feature
        text="Rollup"
        icon={
          <svg
            // width="256px"
            height="24px"
            viewBox="0 0 256 335"
            version="1.1"
            preserveAspectRatio="xMidYMid"
          >
            <defs>
              <linearGradient
                x1="26.8242921%"
                y1="48.2236445%"
                x2="67.5758137%"
                y2="55.339338%"
                id="linearGradient-1"
              >
                <stop stopColor="#FF6533" offset="0%"></stop>
                <stop stopColor="#FF5633" offset="15.7%"></stop>
                <stop stopColor="#FF4333" offset="43.4%"></stop>
                <stop stopColor="#FF3733" offset="71.4%"></stop>
                <stop stopColor="#FF3333" offset="100%"></stop>
              </linearGradient>
              <linearGradient
                x1="20.4503837%"
                y1="38.1333935%"
                x2="93.4858428%"
                y2="80.4322382%"
                id="linearGradient-2"
              >
                <stop stopColor="#BF3338" offset="0%"></stop>
                <stop stopColor="#FF3333" offset="100%"></stop>
              </linearGradient>
              <linearGradient
                x1="32.2926113%"
                y1="39.496861%"
                x2="45.5563705%"
                y2="48.9139013%"
                id="linearGradient-3"
              >
                <stop stopColor="#FF6533" offset="0%"></stop>
                <stop stopColor="#FF5633" offset="15.7%"></stop>
                <stop stopColor="#FF4333" offset="43.4%"></stop>
                <stop stopColor="#FF3733" offset="71.4%"></stop>
                <stop stopColor="#FF3333" offset="100%"></stop>
              </linearGradient>
              <linearGradient
                x1="51.5641026%"
                y1="78.3444231%"
                x2="48.5176441%"
                y2="41.6628279%"
                id="linearGradient-4"
              >
                <stop stopColor="#FF6533" offset="0%"></stop>
                <stop stopColor="#FF5633" offset="15.7%"></stop>
                <stop stopColor="#FF4333" offset="43.4%"></stop>
                <stop stopColor="#FF3733" offset="71.4%"></stop>
                <stop stopColor="#FF3333" offset="100%"></stop>
              </linearGradient>
              <linearGradient
                x1="40.2012262%"
                y1="47.2148639%"
                x2="53.9750044%"
                y2="54.5349876%"
                id="linearGradient-5"
              >
                <stop stopColor="#FBB040" offset="0%"></stop>
                <stop stopColor="#FB8840" offset="100%"></stop>
              </linearGradient>
              <linearGradient
                x1="55.2222794%"
                y1="5.88782542%"
                x2="40.9262994%"
                y2="128.016462%"
                id="linearGradient-6"
              >
                <stop stopColor="#FFFFFF" offset="0%"></stop>
                <stop stopColor="#FFFFFF" stopOpacity="0" offset="100%"></stop>
              </linearGradient>
            </defs>
            <g>
              <path
                d="M256,110.132723 C256,90.4494279 250.844851,71.9963387 241.76476,56.0036613 C217.687872,31.2237986 165.316247,25.4828375 152.311213,55.8864989 C138.954691,87.0517162 174.747826,121.731808 190.389016,118.97849 C210.306636,115.463616 186.874142,69.7702517 186.874142,69.7702517 C217.336384,127.179863 210.306636,109.605492 155.240275,162.328604 C100.173913,215.051716 43.9359268,326.297483 35.7345538,330.983982 C35.3830664,331.218307 35.0315789,331.39405 34.6215103,331.569794 L250.610526,331.569794 C254.418307,331.569794 256.878719,327.527689 255.179863,324.129977 L198.707551,212.356979 C197.477346,209.955149 198.356064,206.967506 200.699314,205.620137 C233.73913,186.639817 256,151.022426 256,110.132723 Z"
                fill="url(#linearGradient-1)"
              ></path>
              <path
                d="M256,110.132723 C256,90.4494279 250.844851,71.9963387 241.76476,56.0036613 C217.687872,31.2237986 165.316247,25.4828375 152.311213,55.8864989 C138.954691,87.0517162 174.747826,121.731808 190.389016,118.97849 C210.306636,115.463616 186.874142,69.7702517 186.874142,69.7702517 C217.336384,127.179863 210.306636,109.605492 155.240275,162.328604 C100.173913,215.051716 43.9359268,326.297483 35.7345538,330.983982 C35.3830664,331.218307 35.0315789,331.39405 34.6215103,331.569794 L250.610526,331.569794 C254.418307,331.569794 256.878719,327.527689 255.179863,324.129977 L198.707551,212.356979 C197.477346,209.955149 198.356064,206.967506 200.699314,205.620137 C233.73913,186.639817 256,151.022426 256,110.132723 Z"
                fill="url(#linearGradient-2)"
              ></path>
              <path
                d="M35.7345538,330.983982 C43.9359268,326.297483 100.173913,214.993135 155.240275,162.270023 C210.306636,109.546911 217.336384,127.121281 186.874142,69.7116705 C186.874142,69.7116705 70.2974828,233.153318 28.1189931,313.995423"
                fill="url(#linearGradient-3)"
              ></path>
              <path
                d="M52.1372998,184.530892 C130.870481,39.776659 141.180778,25.1899314 182.187643,25.1899314 C203.745538,25.1899314 225.479176,34.9144165 239.538673,52.195881 C220.382609,21.3235698 186.464073,0.644393593 147.624714,0.0585812357 L13.8837529,0.0585812357 C11.0718535,0.0585812357 8.78718535,2.34324943 8.78718535,5.15514874 L8.78718535,274.745995 C16.7542334,254.183982 30.2864989,224.776201 52.1372998,184.530892 Z"
                fill="url(#linearGradient-4)"
              ></path>
              <path
                d="M155.240275,162.270023 C100.173913,214.993135 43.9359268,326.297483 35.7345538,330.983982 C27.5331808,335.670481 13.7665904,336.256293 6.44393593,328.05492 C-1.34736842,319.326316 -13.4736842,305.208238 52.1372998,184.530892 C130.870481,39.776659 141.180778,25.1899314 182.187643,25.1899314 C203.745538,25.1899314 225.479176,34.9144165 239.538673,52.195881 C240.300229,53.426087 241.061785,54.7148741 241.823341,56.0036613 C217.746453,31.2237986 165.374828,25.4828375 152.369794,55.8864989 C139.013272,87.0517162 174.806407,121.731808 190.447597,118.97849 C210.365217,115.463616 186.932723,69.7702517 186.932723,69.7702517 C217.336384,127.121281 210.306636,109.546911 155.240275,162.270023 Z"
                fill="url(#linearGradient-5)"
              ></path>
              <path
                d="M58.5812357,190.974828 C137.314416,46.220595 147.624714,31.6338673 188.631579,31.6338673 C206.381693,31.6338673 224.24897,38.2535469 237.839817,50.204119 C223.78032,34.1528604 202.9254,25.1899314 182.187643,25.1899314 C141.180778,25.1899314 130.870481,39.776659 52.1372998,184.530892 C-13.4736842,305.208238 -1.34736842,319.326316 6.44393593,328.05492 C7.55697941,329.285126 8.84576659,330.339588 10.193135,331.218307 C3.33913043,321.259497 0.292906178,298.119908 58.5812357,190.974828 Z"
                fill="url(#linearGradient-6)"
                opacity="0.3"
              ></path>
            </g>
          </svg>
        }
      />
      <Feature
        text="Jest"
        icon={
          <svg width="24" height="24" viewBox="0 0 314.1 345.5">
            <path
              fill="none"
              d="M207.6 95.6l-20.7 41.8c6.8 6.3 11.6 14.6 13.5 24H216c1.8-8.9 6.2-16.9 12.5-23.1l-20.9-42.7z"
            />
            <path
              fill="none"
              d="M169.5 127.3l38.1-77 38 77.5c1.5-.5 3-.9 4.5-1.3L286.2 20H128.9l36 106.2c1.5.3 3.1.7 4.6 1.1zm-13.1 68.1c13.9 0 25.2-11.3 25.2-25.2 0-5.1-1.5-9.8-4.1-13.8-.8-1.3-1.8-2.5-2.8-3.6l-.1-.1c-1-1.1-2.2-2.1-3.4-2.9l-.1-.1c-.3-.2-.7-.5-1.1-.7-.1 0-.1-.1-.2-.1-.4-.2-.8-.5-1.2-.7h-.1c-.4-.2-.9-.5-1.3-.7h-.1c-.4-.2-.8-.4-1.2-.5-.1 0-.2-.1-.3-.1-.3-.1-.7-.3-1-.4-.1 0-.2-.1-.4-.1-.4-.1-.8-.3-1.2-.4h-.1c-.5-.1-.9-.2-1.4-.3-.1 0-.2 0-.4-.1-.4-.1-.7-.1-1.1-.2-.2 0-.3 0-.5-.1-.3 0-.7-.1-1-.1h-3.9c-.4 0-.7.1-1.1.1h-.4c-.4.1-.8.1-1.2.2h-.3c-.5.1-.9.2-1.4.3-11 2.7-19.2 12.7-19.2 24.5.2 13.7 11.5 25.1 25.4 25.1zm106-50.4h-.2c-.4 0-.7-.1-1.1-.1h-1.3c-.5 0-1 0-1.6.1h-.5c-.4 0-.8.1-1.2.1-.1 0-.3 0-.4.1l-1.5.3h-.1c-.5.1-.9.2-1.4.3-.1 0-.3.1-.4.1-.4.1-.8.2-1.2.4-.1 0-.2.1-.3.1-.5.2-1 .4-1.4.6-.5.2-.9.4-1.4.6-.1 0-.2.1-.3.1-.4.2-.8.4-1.2.7 0 0-.1 0-.1.1-.9.5-1.8 1.1-2.6 1.8l-.1.1c-1.3 1-2.4 2.1-3.5 3.3-1.1 1.2-2 2.6-2.8 4-2.1 3.7-3.3 8-3.3 12.5 0 13.9 11.3 25.2 25.2 25.2 13.9 0 25.2-11.3 25.2-25.2 0-12.2-8.8-22.5-20.3-24.8-.6-.2-1.4-.3-2.2-.4zM51.9 195.4c13.9 0 25.2-11.3 25.2-25.2S65.8 145 51.9 145s-25.2 11.3-25.2 25.2 11.3 25.2 25.2 25.2z"
            />
            <path
              fill="none"
              d="M259.9 214.9c-20.8 0-38.3-14.3-43.3-33.5h-16.8c-5 19.2-22.5 33.5-43.3 33.5-2.4 0-4.7-.2-6.9-.5-5.8 8.9-12.7 17.1-20.8 24.7-14.3 13.5-30.5 23.5-48 29.8l-4.1 1.5-3.8-2c-21-10.8-31.8-32.7-28-53.9-2.4-.4-4.7-1-6.9-1.8-.4.7-.7 1.5-1.1 2.3-6.4 13.2-13.1 26.8-15.5 41.4-2.6 15.6-3.7 44.1 18.3 59.3 9.6 6.6 19.7 9.9 31 9.9 21.7 0 45.1-11.6 69.9-23.9 19.4-9.6 39.4-19.6 60.2-24.7 7.9-1.9 15.9-3.1 23.6-4.2 14.1-2 27.5-4 38.4-10.3 11.6-6.7 19.5-17.9 21.7-30.7 1.4-7.8.6-15.7-2-23-6.6 3.8-14.3 6.1-22.6 6.1z"
            />
            <path
              fill="#c21325"
              d="M304.6 170.1c0-20.8-14.3-38.3-33.5-43.3L314.1 0H101l43.1 127.2c-18.6 5.4-32.3 22.6-32.3 43 0 15 7.5 28.3 18.9 36.5-4.5 6.4-9.7 12.3-15.6 17.9C104 235 91.7 243 78.4 248.3c-12-8.1-17.2-22.4-12.5-35.2 18.3-5.6 31.6-22.7 31.6-42.8 0-24.7-20.1-44.7-44.7-44.7-24.7 0-44.8 20.1-44.8 44.8 0 12.2 5 23.4 13 31.4-.7 1.4-1.4 2.8-2.1 4.3-6.7 13.8-14.3 29.4-17.2 46.9-5.8 35 3.7 63.1 26.6 79 12.9 8.9 27.1 13.4 42.4 13.4 26.3 0 53-13.2 78.8-26 18.4-9.1 37.4-18.6 56.1-23.2 6.9-1.7 14.1-2.7 21.7-3.8 15.4-2.2 31.3-4.5 45.6-12.8 16.7-9.7 28.1-25.9 31.4-44.5 2.5-14.3 0-28.7-6.4-41.3 4.3-6.9 6.7-15 6.7-23.7zm-19.5 0c0 13.9-11.3 25.2-25.2 25.2-13.9 0-25.2-11.3-25.2-25.2 0-4.5 1.2-8.8 3.3-12.5.8-1.4 1.8-2.8 2.8-4 1-1.2 2.2-2.3 3.5-3.3l.1-.1c.8-.6 1.7-1.2 2.6-1.8 0 0 .1 0 .1-.1.4-.2.8-.5 1.2-.7.1 0 .2-.1.3-.1.4-.2.9-.4 1.4-.6.5-.2 1-.4 1.4-.6.1 0 .2-.1.3-.1.4-.1.8-.3 1.2-.4.1 0 .3-.1.4-.1.5-.1.9-.2 1.4-.3h.1l1.5-.3c.1 0 .3 0 .4-.1.4 0 .8-.1 1.2-.1h.5c.5 0 1-.1 1.6-.1h1.3c.4 0 .7 0 1.1.1h.2c.8.1 1.6.2 2.4.4 11.4 2.4 20.1 12.6 20.1 24.8zM128.9 20h157.3l-36.1 106.5c-1.5.3-3 .8-4.5 1.3l-38-77.5-38.1 77c-1.5-.5-3.1-.8-4.7-1.1L128.9 20zm71.5 141.4c-1.9-9.4-6.7-17.8-13.5-24l20.7-41.8 20.9 42.7c-6.2 6.2-10.7 14.1-12.5 23.1h-15.6zm-50.1-15.8c.5-.1.9-.2 1.4-.3h.3c.4-.1.8-.1 1.2-.2h.4c.4 0 .7-.1 1.1-.1h3.9c.4 0 .7.1 1 .1.2 0 .3 0 .5.1.4.1.7.1 1.1.2.1 0 .2 0 .4.1.5.1 1 .2 1.4.3h.1c.4.1.8.2 1.2.4.1 0 .2.1.4.1.3.1.7.2 1 .4.1 0 .2.1.3.1.4.2.8.3 1.2.5h.1c.5.2.9.4 1.3.7h.1c.4.2.8.5 1.2.7.1 0 .1.1.2.1.4.2.7.5 1.1.7l.1.1c1.2.9 2.3 1.9 3.4 2.9l.1.1c1 1.1 2 2.3 2.8 3.6 2.6 4 4.1 8.7 4.1 13.8 0 13.9-11.3 25.2-25.2 25.2s-25.2-11.3-25.2-25.2c-.1-11.7 8-21.6 19-24.4zm-98.4-.7c13.9 0 25.2 11.3 25.2 25.2s-11.3 25.2-25.2 25.2-25.2-11.3-25.2-25.2 11.3-25.2 25.2-25.2zm232.6 86.7c-2.2 12.8-10.1 24-21.7 30.7-10.9 6.3-24.3 8.3-38.4 10.3-7.7 1.1-15.8 2.3-23.6 4.2-20.8 5.1-40.8 15.1-60.2 24.7-24.8 12.3-48.2 23.9-69.9 23.9-11.3 0-21.4-3.2-31-9.9-22-15.2-20.9-43.7-18.3-59.3 2.4-14.6 9.1-28.3 15.5-41.4.4-.8.7-1.5 1.1-2.3 2.2.8 4.5 1.4 6.9 1.8-3.8 21.2 7 43.1 28 53.9l3.8 2 4.1-1.5c17.5-6.2 33.7-16.3 48-29.8 8.1-7.6 15-15.8 20.8-24.7 2.3.4 4.6.5 6.9.5 20.8 0 38.3-14.3 43.3-33.5h16.8c5 19.3 22.5 33.5 43.3 33.5 8.3 0 16-2.3 22.6-6.2 2.6 7.5 3.4 15.3 2 23.1z"
            />
          </svg>
        }
      />
      <Feature
        text="Prettier"
        icon={
          <svg
            width="24"
            height="24"
            viewBox="0 0 256 256"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            xmlnsXlink="http://www.w3.org/1999/xlink"
            preserveAspectRatio="xMidYMid"
          >
            <g>
              <rect
                fill="#56B3B4"
                x="182.857143"
                y="48.7619048"
                width="24.3809524"
                height="12.1904762"
                rx={5}
              />
              <rect
                fill="#EA5E5E"
                x={0}
                y="243.809524"
                width="73.1428571"
                height="12.1904762"
                rx={5}
              />
              <rect
                fill="#BF85BF"
                x="146.285714"
                y="146.285714"
                width="48.7619048"
                height="12.1904762"
                rx={5}
              />
              <rect
                fill="#EA5E5E"
                x="73.1428571"
                y="146.285714"
                width="60.952381"
                height="12.1904762"
                rx={5}
              />
              <rect
                fill="#56B3B4"
                x={0}
                y="146.285714"
                width="60.952381"
                height="12.1904762"
                rx={5}
              />
              <rect
                fill="#BF85BF"
                x={0}
                y="195.047619"
                width="73.1428571"
                height="12.1904762"
                rx={5}
              />
              <rect
                fill="#BF85BF"
                x={0}
                y="97.5238095"
                width="73.1428571"
                height="12.1904762"
                rx={5}
              />
              <rect
                fill="#F7BA3E"
                x="60.952381"
                y="24.3809524"
                width="134.095238"
                height="12.1904762"
                rx={5}
              />
              <rect
                fill="#EA5E5E"
                x={0}
                y="24.3809524"
                width="48.7619048"
                height="12.1904762"
                rx={5}
              />
              <rect
                fill="#F7BA3E"
                x="48.7619048"
                y="219.428571"
                width="24.3809524"
                height="12.1904762"
                rx={5}
              />
              <rect
                fill="#56B3B4"
                x="48.7619048"
                y="73.1428571"
                width="24.3809524"
                height="12.1904762"
                rx={5}
              />
              <rect
                fill="#56B3B4"
                x={0}
                y="219.428571"
                width="36.5714286"
                height="12.1904762"
                rx={5}
              />
              <rect
                fill="#F7BA3E"
                x={0}
                y="73.1428571"
                width="36.5714286"
                height="12.1904762"
                rx={5}
              />
              <rect
                fill="#D0D4D8"
                opacity="0.5"
                x="158.47619"
                y="219.428571"
                width="24.3809524"
                height="12.1904762"
                rx={5}
              />
              <rect
                fill="#D0D4D8"
                opacity="0.5"
                x="85.3333333"
                y="219.428571"
                width="60.952381"
                height="12.1904762"
                rx={5}
              />
              <rect
                fill="#D0D4D8"
                opacity="0.5"
                x="195.047619"
                y="219.428571"
                width="60.952381"
                height="12.1904762"
                rx={5}
              />
              <rect
                fill="#56B3B4"
                x="97.5238095"
                y="121.904762"
                width="109.714286"
                height="12.1904762"
                rx={5}
              />
              <rect
                fill="#F7BA3E"
                x="36.5714286"
                y="121.904762"
                width="48.7619048"
                height="12.1904762"
                rx={5}
              />
              <rect
                fill="#EA5E5E"
                x={0}
                y="121.904762"
                width="24.3809524"
                height="12.1904762"
                rx={5}
              />
              <rect
                fill="#BF85BF"
                x="109.714286"
                y="48.7619048"
                width="60.952381"
                height="12.1904762"
                rx={5}
              />
              <rect
                fill="#56B3B4"
                x={0}
                y="48.7619048"
                width="97.5238095"
                height="12.1904762"
                rx={5}
              />
              <rect
                fill="#F7BA3E"
                x="36.5714286"
                y="170.666667"
                width="121.904762"
                height="12.1904762"
                rx={5}
              />
              <rect
                fill="#BF85BF"
                x={0}
                y="170.666667"
                width="24.3809524"
                height="12.1904762"
                rx={5}
              />
              <rect
                fill="#EA5E5E"
                x="146.285714"
                y="73.1428571"
                width="73.1428571"
                height="12.1904762"
                rx={5}
              />
              <rect
                fill="#F7BA3E"
                x="146.285714"
                y="97.5238095"
                width="73.1428571"
                height="12.1904762"
                rx={5}
              />
              <rect
                fill="#56B3B4"
                x={0}
                y={0}
                width="158.47619"
                height="12.1904762"
                rx={5}
              />
              <rect
                fill="#D0D4D8"
                opacity="0.5"
                x="170.666667"
                y={0}
                width="85.3333333"
                height="12.1904762"
                rx={5}
              />
              <rect
                fill="#D0D4D8"
                opacity="0.5"
                x="170.666667"
                y="170.666667"
                width="36.5714286"
                height="12.1904762"
                rx={5}
              />
              <rect
                fill="#D0D4D8"
                opacity="0.5"
                x="219.428571"
                y="170.666667"
                width="36.5714286"
                height="12.1904762"
                rx={5}
              />
              <rect
                fill="#D0D4D8"
                opacity="0.5"
                x="207.238095"
                y="146.285714"
                width="48.7619048"
                height="12.1904762"
                rx={5}
              />
              <rect
                fill="#D0D4D8"
                opacity="0.5"
                x="207.238095"
                y="24.3809524"
                width="48.7619048"
                height="12.1904762"
                rx={5}
              />
              <rect
                fill="#D0D4D8"
                opacity="0.5"
                x="219.428571"
                y="121.904762"
                width="36.5714286"
                height="12.1904762"
                rx={5}
              />
              <rect
                fill="#D0D4D8"
                opacity="0.5"
                x="219.428571"
                y="48.7619048"
                width="36.5714286"
                height="12.1904762"
                rx={5}
              />
              <rect
                fill="#D0D4D8"
                opacity="0.5"
                x="231.619048"
                y="73.1428571"
                width="24.3809524"
                height="12.1904762"
                rx={5}
              />
              <rect
                fill="#D0D4D8"
                opacity="0.5"
                x="231.619048"
                y="97.5238095"
                width="24.3809524"
                height="12.1904762"
                rx={5}
              />
              <rect
                fill="#D0D4D8"
                opacity="0.5"
                x="134.095238"
                y="195.047619"
                width="121.904762"
                height="12.1904762"
                rx={5}
              />
              <rect
                fill="#D0D4D8"
                opacity="0.5"
                x="85.3333333"
                y="195.047619"
                width="36.5714286"
                height="12.1904762"
                rx={5}
              />
              <rect
                fill="#D0D4D8"
                opacity="0.5"
                x="182.857143"
                y="243.809524"
                width="73.1428571"
                height="12.1904762"
                rx={5}
              />
              <rect
                fill="#D0D4D8"
                opacity="0.5"
                x="85.3333333"
                y="243.809524"
                width="85.3333333"
                height="12.1904762"
                rx={5}
              />
              <rect
                fill="#D0D4D8"
                opacity="0.5"
                x="85.3333333"
                y="73.1428571"
                width="48.7619048"
                height="12.1904762"
                rx={5}
              />
              <rect
                fill="#D0D4D8"
                opacity="0.5"
                x="85.3333333"
                y="97.5238095"
                width="48.7619048"
                height="12.1904762"
                rx={5}
              />
            </g>
          </svg>
        }
      />
      <Feature
        text="ESLint"
        icon={
          <svg
            width="24"
            height="24"
            viewBox="0 0 256 225"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            preserveAspectRatio="xMidYMid"
          >
            <g>
              <path
                d="M77.9645944,80.5683518 L126.534904,52.5264993 C127.750365,51.8245002 129.248632,51.8245002 130.464093,52.5264993 L179.035406,80.5683518 C180.249864,81.2703508 181,82.5670433 181,83.9710413 L181,140.054746 C181,141.457742 180.249864,142.755437 179.035406,143.458439 L130.464093,171.500291 C129.248632,172.20229 127.750365,172.20229 126.534904,171.500291 L77.9645944,143.458439 C76.7491332,142.75644 76,141.458744 76,140.054746 L76,83.9710413 C76.0010029,82.5670433 76.7501361,81.2703508 77.9645944,80.5683518"
                fill="#8080F2"
              ></path>
              <path
                d="M254.4167,107.416596 L196.323141,6.34980392 C194.212911,2.69552941 190.314709,-1.42108547e-14 186.095253,-1.42108547e-14 L69.9061271,-1.42108547e-14 C65.6856677,-1.42108547e-14 61.7864612,2.69552941 59.6762315,6.34980392 L1.58267227,107.193725 C-0.527557422,110.849004 -0.527557422,115.462024 1.58267227,119.117302 L59.6762315,219.355859 C61.7864612,223.010133 65.6856677,224.878431 69.9061271,224.878431 L186.094249,224.878431 C190.313705,224.878431 194.212911,223.066353 196.322137,219.411075 L254.415696,119.008878 C256.527934,115.355608 256.527934,111.070871 254.4167,107.416596 L254.4167,107.416596 Z M206.312097,156.016439 C206.312097,157.502243 205.417609,158.876612 204.129585,159.620518 L130.130998,202.31429 C128.843979,203.057192 127.231691,203.057192 125.944672,202.31429 L51.8888615,159.620518 C50.6018422,158.876612 49.7013303,157.503247 49.7013303,156.016439 L49.7013303,70.6278902 C49.7013303,69.1410824 50.5887913,67.7677176 51.8768145,67.0238118 L125.87239,24.3300392 C127.159409,23.5861333 128.769689,23.5861333 130.056708,24.3300392 L204.117538,67.0238118 C205.405562,67.7677176 206.312097,69.1410824 206.312097,70.6278902 L206.312097,156.016439 L206.312097,156.016439 Z"
                fill="#4B32C3"
              ></path>
            </g>
          </svg>
        }
      />
      <Feature
        text="VSCode"
        icon={
          <svg
            width="24"
            height="24"
            viewBox="0 0 256 256"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <mask
              id="mask0"
              mask-type="alpha"
              maskUnits="userSpaceOnUse"
              x={0}
              y={0}
              width={256}
              height={256}
            >
              <path
                fillRule="evenodd"
                clipRule="evenodd"
                d="M181.534 254.252C185.566 255.823 190.164 255.722 194.234 253.764L246.94 228.403C252.478 225.738 256 220.132 256 213.983V42.0181C256 35.8689 252.478 30.2638 246.94 27.5988L194.234 2.23681C188.893 -0.333132 182.642 0.296344 177.955 3.70418C177.285 4.191 176.647 4.73454 176.049 5.33354L75.149 97.3862L31.1992 64.0247C27.1079 60.9191 21.3853 61.1735 17.5855 64.63L3.48936 77.4525C-1.15853 81.6805 -1.16386 88.9926 3.47785 93.2274L41.5926 128L3.47785 162.773C-1.16386 167.008 -1.15853 174.32 3.48936 178.548L17.5855 191.37C21.3853 194.827 27.1079 195.081 31.1992 191.976L75.149 158.614L176.049 250.667C177.645 252.264 179.519 253.467 181.534 254.252ZM192.039 69.8853L115.479 128L192.039 186.115V69.8853Z"
                fill="white"
              />
            </mask>
            <g mask="url(#mask0)">
              <path
                d="M246.94 27.6383L194.193 2.24138C188.088 -0.698302 180.791 0.541721 175.999 5.33332L3.32371 162.773C-1.32082 167.008 -1.31548 174.32 3.33523 178.548L17.4399 191.37C21.2421 194.827 26.9682 195.081 31.0619 191.976L239.003 34.2269C245.979 28.9347 255.999 33.9103 255.999 42.6667V42.0543C255.999 35.9078 252.478 30.3047 246.94 27.6383Z"
                fill="#0065A9"
              />
              <g filter="url(#filter0_d)">
                <path
                  d="M246.94 228.362L194.193 253.759C188.088 256.698 180.791 255.458 175.999 250.667L3.32371 93.2272C-1.32082 88.9925 -1.31548 81.6802 3.33523 77.4523L17.4399 64.6298C21.2421 61.1733 26.9682 60.9188 31.0619 64.0245L239.003 221.773C245.979 227.065 255.999 222.09 255.999 213.333V213.946C255.999 220.092 252.478 225.695 246.94 228.362Z"
                  fill="#007ACC"
                />
              </g>
              <g filter="url(#filter1_d)">
                <path
                  d="M194.196 253.763C188.089 256.7 180.792 255.459 176 250.667C181.904 256.571 192 252.389 192 244.039V11.9606C192 3.61057 181.904 -0.571175 176 5.33321C180.792 0.541166 188.089 -0.700607 194.196 2.23648L246.934 27.5985C252.476 30.2635 256 35.8686 256 42.0178V213.983C256 220.132 252.476 225.737 246.934 228.402L194.196 253.763Z"
                  fill="#1F9CF0"
                />
              </g>
              <g style={{ mixBlendMode: 'overlay' }} opacity="0.25">
                <path
                  fillRule="evenodd"
                  clipRule="evenodd"
                  d="M181.378 254.252C185.41 255.822 190.008 255.722 194.077 253.764L246.783 228.402C252.322 225.737 255.844 220.132 255.844 213.983V42.0179C255.844 35.8687 252.322 30.2636 246.784 27.5986L194.077 2.23665C188.737 -0.333299 182.486 0.296177 177.798 3.70401C177.129 4.19083 176.491 4.73437 175.892 5.33337L74.9927 97.386L31.0429 64.0245C26.9517 60.9189 21.229 61.1734 17.4292 64.6298L3.33311 77.4523C-1.31478 81.6803 -1.32011 88.9925 3.3216 93.2273L41.4364 128L3.3216 162.773C-1.32011 167.008 -1.31478 174.32 3.33311 178.548L17.4292 191.37C21.229 194.827 26.9517 195.081 31.0429 191.976L74.9927 158.614L175.892 250.667C177.488 252.264 179.363 253.467 181.378 254.252ZM191.883 69.8851L115.323 128L191.883 186.115V69.8851Z"
                  fill="url(#paint0_linear)"
                />
              </g>
            </g>
            <defs>
              <filter
                id="filter0_d"
                x="-21.4896"
                y="40.5225"
                width="298.822"
                height="236.149"
                filterUnits="userSpaceOnUse"
                colorInterpolationFilters="sRGB"
              >
                <feFlood floodOpacity={0} result="BackgroundImageFix" />
                <feColorMatrix
                  in="SourceAlpha"
                  type="matrix"
                  values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
                />
                <feOffset />
                <feGaussianBlur stdDeviation="10.6667" />
                <feColorMatrix
                  type="matrix"
                  values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
                />
                <feBlend
                  mode="overlay"
                  in2="BackgroundImageFix"
                  result="effect1_dropShadow"
                />
                <feBlend
                  mode="normal"
                  in="SourceGraphic"
                  in2="effect1_dropShadow"
                  result="shape"
                />
              </filter>
              <filter
                id="filter1_d"
                x="154.667"
                y="-20.6735"
                width="122.667"
                height="297.347"
                filterUnits="userSpaceOnUse"
                colorInterpolationFilters="sRGB"
              >
                <feFlood floodOpacity={0} result="BackgroundImageFix" />
                <feColorMatrix
                  in="SourceAlpha"
                  type="matrix"
                  values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
                />
                <feOffset />
                <feGaussianBlur stdDeviation="10.6667" />
                <feColorMatrix
                  type="matrix"
                  values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
                />
                <feBlend
                  mode="overlay"
                  in2="BackgroundImageFix"
                  result="effect1_dropShadow"
                />
                <feBlend
                  mode="normal"
                  in="SourceGraphic"
                  in2="effect1_dropShadow"
                  result="shape"
                />
              </filter>
              <linearGradient
                id="paint0_linear"
                x1="127.844"
                y1="0.659988"
                x2="127.844"
                y2="255.34"
                gradientUnits="userSpaceOnUse"
              >
                <stop stopColor="white" />
                <stop offset={1} stopColor="white" stopOpacity={0} />
              </linearGradient>
            </defs>
          </svg>
        }
      />
    </div>
  </div>
);
